<template>
  <view :class="classNameList">
    <view class="_mask" :style="{'background':  maskBackground}" @click="onMask" @touchmove.stop.prevent="moveHandle" />
    <view class="_body" :style="{'background':  background}">
      <view class="_animation" :animation="animationData">
        <view v-if="title" class="_title">
          {{title}}
          <view v-if="desc" class="_desc">{{ desc }}</view>
        </view>
        <view class="_content" :style="[styles]" @click="handleClick">
          <slot />
        </view>
        <template v-if="cancelText || confirmText">
          <view class="_footer">
            <view v-if="cancelText" class="_button _cancel" @click="onCancel">
              <view class="text">
                {{ cancelText }}
              </view>
            </view>
            <view v-if="confirmText" class="_button _confirm" @click="onConfirm">
              <block v-if="openType">
                <x-button plain block :open-type="openType" @getUserInfo="getUserInfo">
                  <view class="text">
                    {{ confirmText }}
                  </view>
                </x-button>
              </block>
              <view v-else class="text">
                {{ confirmText }}
              </view>
            </view>
          </view>
        </template>
        <view v-if="isCancel" class="_cancel_bottom">
          <view class="_cancel_bottom_icon" @click="onCancel">
            <x-icon name="icon-025" color="#fff" size="50" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XButton from '@/components/x-button';
import XIcon from '@/components/x-icon';
export default {
  name: 'XModal',
  components: {
    XButton,
    XIcon
  },
  props: {
    background: {
      type: String,
      default: '#fff'
    },
    maskBackground: {
      type: String,
      default: 'rgba(0, 0, 0, .7)'
    },
    visible: {
      type: Boolean,
      default: false
    },
    cancelText: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: 'success'
    },
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    openType: {
      type: String,
      default: ''
    },
    noPadding: {
      type: Boolean,
      default: false
    },
    isMask: {
      type: Boolean,
      default: true
    },
    isCancel: {
      type: Boolean,
      default: false
    },
    isRadius: {
      type: Boolean,
      default: true
    },
    animation: {
      type: Boolean,
      default: true
    },
    padding: {
      type: [String, Number],
      default: 30
    },
    width: {
      type: [String, Number],
      default: 540
    }
  },
  data() {
    return {
      elAnimation: null,
      animationData: null
    };
  },
  computed: {
    classNameList() {
      const arr = ['x-modal'];
      if (this.visible) {
        if (this.animation) {
          arr.push('is-animation');
        } else {
          arr.push('is-show');
        }
      }
      if (this.isRadius) {
        arr.push('is-radius');
      }
      if (this.noPadding) {
        arr.push('is-no-padding');
      }
      return arr.join(' ');
    },
    styles() {
      return {
        width: `${this.width}rpx`,
        padding: `${this.padding}rpx`
      };
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.setAnimation();
          });
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    // 若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数
    moveHandle() {},
    onMask() {
      if (this.isMask) {
        this.onCancel();
      }
    },
    onCancel() {
      this.$emit('update:visible', false);
      this.$emit('cancel');
    },
    onConfirm() {
      if (this.openType) return;
      // this.$emit('update:visible', false)
      this.$emit('confirm');
    },
    getUserInfo({ detail }) {
      // this.$emit('update:visible', false)
      this.$emit('confirm', detail);
    },
    handleClick() {
      this.$emit('click');
    },
    setAnimation() {
      this.elAnimation = uni.createAnimation({
        duration: 400,
        timingFunction: 'ease'
      });
      this.elAnimation.opacity(1).step();
      this.animationData = this.elAnimation.export();
    }
  }
};
</script>

<style lang="scss">
  .x-modal{
    position: fixed; width: 100%; height: 100%; z-index: 1001; left: 0; top: 0;
    ._mask{ background-color: rgba(0,0,0,.7); position: absolute; width: 100%; height: 100%; left: 0; right: 0;}
    ._body{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); font-size: 28px;}
    ._title{
      border-bottom: 1px solid #F3F4F6; padding: 28px; font-weight: bold; font-size: 32px; text-align: center; color: $uni-color-default;
      ._desc{ font-weight: normal; font-size: 24px; color: #A4A4A4; text-align: left; padding: 10px 20px 0;}
    }
    ._content{
      overflow: hidden; color: #000;
    }
    ._cancel_bottom{
      text-align: center; position: absolute; right: -20px; top: -100px;
      ._cancel_bottom_icon{
        padding: 10px; display: inline-block;
      }
    }
    ._footer{
      display: flex; align-items: center; border-top: 1px solid #F3F4F6;
      ._button{
        flex: 1; border-right: 1px solid #F3F4F6;
        .text{ padding: 28px 0; text-align: center; font-size: 32px;}
        &._confirm .text{ color: $uni-color-primary;}
        &._cancel .text{ color: $uni-color-default;}
        &:last-child{ border-right: 0;}
      }
    }

    &.is-animation{
      ._animation{ opacity: 0;}
    }
    &.is-no-padding{
      ._content{ padding: 0;}
    }
    &.is-radius{
      ._body{  border-radius: 10px;}
    }
  }
</style>
